<template>
  <view>
    <image :src="imageUrl" mode="aspectFit" class="preview-image"></image>
    <view>
			<view class="cu-form-group">
				<view class="title">
					<view class="price">￥{{totalAmount}}</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">选择数量</view>
				<UniNumberBox :value="quantity" :min="1" @change="onQuantityChange"></UniNumberBox>
			</view>
			<view class="cu-form-group">
				<view class="title">名称</view>
				<input v-model="name" placeholder="请输入定制商品名称"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">描述</view>
				<input v-model="goodsInfo" placeholder="请输入定制商品描述"></input>
			</view>
		</view>
		<view class="footer">
			<button class="cu-btn lg block bg-red" style="border-radius: 0;" @tap="submit">提交</button>
		</view>
  </view>
</template>

<script>
	import UniNumberBox from '../../lib/uni-number-box/uni-number-box.vue'
export default {
  components: {
		UniNumberBox
	},
  data() {
    return {
      imageUrl: '',
			quantity: 1,
			name: '',
			goodsInfo: '',
    }
  },
	computed: {
		totalAmount() {
			return this.quantity * this.$constants.CUSTOM_PRICE
		}
	},
  onLoad(query) {
    this.imageUrl = query.imageUrl
  },
	methods: {
		onQuantityChange(val) {
			this.quantity = val
		},
    // 提交
		submit() {
			this.name = this.name.trim()
			this.goodsInfo = this.goodsInfo.trim()
			if (!this.name) {
				uni.showToast({
          title: '请输入名称',
          duration: 1000
        })
        return
			}
      uni.showLoading()
      // 上传图片
      this.$api.upload(this.imageUrl).then(res => {
        console.log('upload', res)
        const imageUploadUrl = res.data
        if (!imageUploadUrl) {
          uni.showToast({
            title: '图片上传失败',
            duration: 2000
          })
          return
        }
        // 创建商品
        const userName = getApp().globalData.userInfo.nickName
        const data = {
          name: this.name,
          spec: '',
          unitName: '件',
          categoryUuid: this.$constants.CUSTOM_CATEGORY_UUID,
          salePrice: this.$constants.CUSTOM_PRICE,
          status: 'up',
          goodsInfo: this.goodsInfo,
          thumbnail: imageUploadUrl,
          imagesJsonStr: JSON.stringify([imageUploadUrl])
        }
        this.$api.goods.saveNew({
          goods: data,
          userName: userName,
          userUuid: userName + '' + Date.now(),
        }).then(res => {
          console.log('saveNew', res)
          const uuid = res
          // 生成订单数据格式
          const orderData = {
            goodsTotalQty: this.quantity,
            totalAmount: this.totalAmount,
            lines: [{
              goodsCategoryName: this.$constants.CUSTOM_CATEGORY_NAME,
              goodsName: this.name,
              goodsPic: imageUploadUrl,
              goodsQty: this.quantity,
              goodsSpec: data.spec,
              goodsUuid: uuid,
              salePrice: this.$constants.CUSTOM_PRICE,
              unitName: data.unitName,
            }]
          }
          // 跳转订单确认页面
          getApp().globalData.order = orderData;
          uni.navigateTo({ url: '/pages/order/view' });
        }).catch(err => {
          uni.showToast({
            title: '商品创建失败',
            duration: 2000
          })
        }).finally(() => {
          uni.hideLoading()
        })
      }).catch(err => {
        uni.hideLoading()
        uni.showToast({
          title: '图片上传失败',
          duration: 2000
        })
      })
		}
	}
}
</script>

<style scoped>
.preview-image {
	width: 100%;
	/* border-bottom: 1px solid #eee; */
	background-color: #eee;
  height: 500rpx;
}
.price {
	color: #f40;
	font-size: 20px;
}
.footer {
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
}
</style>
